<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryModel.username" placeholder="用户名" class="filter-item" style="width: 200px;" clearable />

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      row-key="id"
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" width="70" :index="indexMethod" />
      <el-table-column label="用户名" prop="username" />
      <el-table-column label="IP" prop="ip" />
      <el-table-column label="IP地址" prop="ipFrom" show-overflow-tooltip />
      <el-table-column label="方法名称" prop="methodName" show-overflow-tooltip />
      <el-table-column label="参数" prop="param" show-overflow-tooltip />
      <el-table-column label="请求耗时" prop="time" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
          <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
          <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" prop="createTime" :formatter="dateFormat" />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page-num.sync="queryModel.pageNum" :page-size.sync="queryModel.pageSize" @pagination="fetchList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'
export default {
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      formId: 0,
      queryModel: {
        username: null,
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    indexMethod(index) {
      return (this.queryModel.pageNum - 1) * this.queryModel.pageSize + index + 1
    },
    dateFormat(row, column) {
      const data = row[column.property]
      return parseTime(data)
    },
    fetchList() {
      this.listLoading = true
      this.$api.log.listPage(this.queryModel).then(res => {
        this.listLoading = false
        this.total = res.data.pagination.total
        this.list = res.data.data
      })
    },
    handleFilter() {
      this.queryModel.pageNum = 1
      this.fetchList()
    }
  }
}

</script>
<style scoped>
</style>
